<template>
	<page-body>
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center flex_0_ibhf"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub fd0_0_ibhf'>
					<view class='flex flex-wrap align-center fd0_0_c0_ibhf' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1">
						<text class='fu-iconfont2  fd0_0_c0_c0_ibhf'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='fd0_0_c1_c0_ibhf'>发放对象</text>
					</view>
					<view class='flex flex-wrap align-center justify-end fd0_0_c0_ibhf'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center flex_1_ibhf">

				<benben-flex-collapse class='flex flex flex-direction fd1_0_ibhf' v-for="(item,index) in list"
					:key='index'>


					<benben-collapse-item name="CollapseItem1758106306791" :border='true'>
						<template #title="{isOpen,disabled}">
							<view class="flex not an flex align-center notAnfd1_0_c0_ibhf"
								:class="disabled?'benben-collapse-disabled':''">

								<view class='flex flex align-center justify-center notAnfd1_0_c0_c0_ibhf' @tap.stop="checkall(item,index)" v-if="item.student_list.length>0">
									<image v-if="item.check" class='areafd1_0_c0_c0_c1_ibhf' mode="aspectFit"
										:src='STATIC_URL+"1671.png"'></image>
									<view v-else class="huikuang"> </view>
								</view>

								<view class='flex flex align-center justify-center flex-sub notAnfd1_0_c0_c1_ibhf'>
									<text class='flex-sub notAnfd1_0_c0_c1_c0_ibhf'>{{item.name}}</text>
								</view>

								<view class='flex flex align-center justify-center notAnfd1_0_c0_c2_ibhf'>
									<text>{{item.checknum}}/{{item.student_list.length}}人</text>
									<text v-if="!isOpen" class='fu-iconfont2  notAnfd1_0_c0_c2_c1_ibhf'>&#xE78A;</text>
									<text v-if="isOpen" class='fu-iconfont2  notAnfd1_0_c0_c2_c1_ibhf'>&#xE7ED;</text>
								</view>

							</view>
						</template>
						<template #line>
							<view class="flex line  linefd1_0_c0_ibhf"></view>
						</template>
						<template #content>
							<view class="flex area flex areafd1_0_c0_ibhf" v-for="(items,indexs) in item.student_list"
								:key='indexs'>

								<view class='flex flex align-center areafd1_0_c0_c0_ibhf' @tap.stop="check(index,indexs)">
									<!-- <text class='fu-iconfont2  areafd1_0_c0_c0_c0_ibhf'>&#xE608;</text> -->
									<image v-if="items.ischeck" class='areafd1_0_c0_c0_c1_ibhf' mode="aspectFit"
										:src='STATIC_URL+"1671.png"'></image>
									<view v-else class="huikuang"> </view>
									<image class="person" :src='items.avatar?items.avatar:STATIC_URL+"LOGO.png"' mode="aspectFill"></image>
									<text class='flex-sub areafd1_0_c0_c0_c2_ibhf'>{{items.real_name}}</text>
								</view>

							</view>
						</template>
					</benben-collapse-item>


				</benben-flex-collapse>

			</view>

			<!---flex布局flex布局结束-->
			<view class="flex benben-position-layout flex flex-wrap align-center flex_2_ibhf">
				<view class='flex flex-wrap align-center justify-center fd2_0_ibhf' @tap.stop="allcheck()">
					<text class='fd2_0_c0_ibhf'>{{type==1?'全选':'取消全选'}}</text>
				</view>
				<view class='flex flex-wrap align-center justify-center fd2_1_ibhf' @tap.stop='sure'>
					<text class='fd2_1_c0_ibhf' >确定</text>
				</view>

			</view>
			<view :style="{height: '190rpx'}"></view>


		</view>
	</page-body>
</template>
<script>
	export default {
		components: {},


		data() {
			return {
				course_id: '', //课程列表ID
				list: [],
				user_id:'',//发放对象
				type:'1',//1 没全选 2全选状态
				xznum:0,//全选中的
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			this.course_id = options.course
			this.getlist()
			if (global.appTabBarType) this.toHomeDiy()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.user_id=uni.getStorageSync('checkxs')
			console.log(this.user_id)
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 获取学生
			async getlist() {
				// 查看预习测试有没有发布
				let res = await this.$api.post(global.apiUrls.post68d24560cbb56, {
					course_id: this.course_id
				})

				if (res.data.code != 1) {
					this.$message.info(res.data.msg);
					return
				}
				this.xznum=0
				this.list = res.data.data.map(item=>{
					item.check=false
					item.checknum=0
					
					item.student_list.map(items=>{
						items.ischeck=false
						items.checknum=0
						if(this.user_id.indexOf(items.id)!=-1){
							items.ischeck=true
						}
					})
					return item
				})
				console.log(this.list)
				this.getnum()
			},
			// 某个班级全选 全不选
			checkall(item,index){
				this.list[index].check=!this.list[index].check
				this.list[index].student_list.map(items=>{
					items.ischeck=this.list[index].check
				})
				this.getnum()
			},
			// 某个学生选中 不选中
			check(inde,index){
				this.list[inde].student_list[index].ischeck=!this.list[inde].student_list[index].ischeck
				this.getnum()
			},
			// 班级全选
			allcheck(){
				// console.log(this.type)
				this.list.map(item=>{
					item.check=this.type==1?true:false
					item.student_list.map(items=>{
						items.ischeck=this.type==1?true:false
					})
				})
				this.type=this.type==1?2:1
				this.getnum()
			},
			// 选中人数
			getnum(){
				this.xznum=0
				this.list.map(item=>{
					item.checknum=0
					item.student_list.map(items=>{
						if(items.ischeck){
							item.checknum++
						}
					})
					if(item.checknum == item.student_list.length){
						item.check=true
					}else{
						item.check=false
					}
					if(item.check){
						this.xznum++
					}
				})
				if(this.xznum == this.list.length){
					this.type=2
				}else{
					this.type=1
				}
				
			},
			sure(){
				let id=''
				this.list.map(item=>{
					item.student_list.map(items=>{
						if(items.ischeck){
							id+=items.id+','
						}
						
					})
				})
				if(id){
					id = id.substring(0, id.lastIndexOf(','));
				}else{
					this.$message.info('请选择学生')
					return
				}
				console.log(id)
				uni.setStorageSync('checkxs', id)
				uni.navigateBack()
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: var(--benbenbgColor1);
		background-size: 100% auto;

		.flex_2_ibhf {
			width: 750rpx;
			height: 104rpx;
			overflow: hidden;
			z-index: 10;
			bottom: calc(0px + var(--window-bottom));
			background: #FFFFFF;
			// box-shadow: 0rpx -1rpx 0rpx 1rpx #EEEEEE;

			.fd2_0_ibhf {
				border: 1px solid #145EFD;
				background: #FFFFFF;
				width: 264rpx;
				height: 84rpx;
				margin: 0rpx 40rpx 0rpx 90rpx;
				border-radius: 42rpx;

				.fd2_0_c0_ibhf {
					color: rgba(20, 94, 253, 1);
				}
			}

			.fd2_1_ibhf {
				background: #145EFD;
				width: 264rpx;
				height: 84rpx;
				border-radius: 48rpx;
				line-height: 84rpx;

				.fd2_1_c0_ibhf {
					font-size: 28rpx;
					color: var(--benbenFontColor3);
				}
			}
		}

		.flex_1_ibhf {
			padding: 0rpx 24rpx 0rpx 24rpx;
			width: 100%;

			.fd1_0_ibhf {
				width: 100%;

				.areafd1_0_c0_ibhf {
					min-height: 80rpx;
				}

				.linefd1_0_c0_ibhf {
					width: 100%;
					height: 1rpx;
					background: #ebeef5;
					margin: 10rpx 0rpx 10rpx 0rpx;
					transform: scaleY(0.5);
				}

				.notAnfd1_0_c0_c2_ibhf {
					height: 100%;
					width: 200rpx;

					.notAnfd1_0_c0_c2_c1_ibhf {
						color: rgba(187, 187, 187, 1);
						font-size: 38rpx;
						transform: scale(0.5);
						margin: 0rpx 10rpx 0rpx 10rpx;
					}
				}

				.anfd1_0_c0_c2_ibhf {
					height: 100%;
					width: 60rpx;

					.anfd1_0_c0_c2_c0_ibhf {
						color: rgb(187, 187, 187);
						font-size: 38rpx;
						transform: scale(0.5);
						margin: 0rpx 10rpx 0rpx 10rpx;
					}
				}

				.areafd1_0_c0_c0_ibhf {
					height: 100rpx;
					width: 100%;
					margin-left: 96rpx;

					.areafd1_0_c0_c0_c0_ibhf {
						color: rgb(187, 187, 187);
						font-size: 28rpx;
						margin: 0rpx 10rpx 0rpx 106rpx;
					}



					.areafd1_0_c0_c0_c2_ibhf {
						font-weight: 400;
						font-size: 28rpx;
						color: #b9bcc5;
						line-height: 40rpx;
						text-decoration: none;
						margin-left: 24rpx;
					}
				}
			}
		}

		.areafd1_0_c0_c0_c1_ibhf {
			width: 36rpx;
			height: 36rpx;
			border-radius: 0rpx;
		}

		.huikuang {
			width: 36rpx;
			height: 36rpx;
			// background: #FFFFFF;
			border-radius: 6rpx;
			border: 2px solid #CCCCCC;
		}

		.person {
			margin-left: 36rpx;
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
		}

		.notAnfd1_0_c0_ibhf {
			height: 96rpx;
		}

		.notAnfd1_0_c0_c0_ibhf {
			height: 100%;
			width: 96rpx;
		}

		.notAnfd1_0_c0_c1_ibhf {
			height: 100%;
		}

		.notAnfd1_0_c0_c1_c0_ibhf {
			padding: 0rpx 15rpx 0rpx 15rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: rgb(16, 16, 16);
			line-height: 40rpx;
			text-decoration: none;
		}

		.anfd1_0_c0_c0_c0_ibhf {
			padding: 0rpx 15rpx 0rpx 15rpx;
			color: #101010;
			font-size: 28rpx;
		}

		.flex_0_ibhf {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			top: 0rpx;
			background: #fff;
			background-size: 100% auto !important;

			.fd0_0_ibhf {
				padding: 0rpx 32rpx 0rpx 32rpx;

				.fd0_0_c1_c0_ibhf {
					font-size: 36rpx;
					font-weight: 700;
					color: #333333;
					line-height: 50rpx;
				}
			}
		}

		.fd0_0_c0_ibhf {
			width: 120rpx;

			.fd0_0_c0_c0_ibhf {
				font-size: 36rpx;
				color: #333;
			}
		}
	}
</style>
